<template>
  <div class="map_wrap">
    <div class="map1" id="map1" style="height: 900px; width: 900px">map</div>
  </div>
</template>

<script lang="ts">
  import {defineComponent, nextTick, onMounted} from 'vue'
  export default defineComponent({
    name: ''
  })
</script>
<script lang="ts" setup>
  import * as echarts from 'echarts'
  import chinaJSON from './dataJson/china.json'
  // import cecharts from '@/libs/global/echarts'
  // echarts.registerMap('chain', chinaJSON)

  // let echart: cecharts.ECharts

  nextTick(() => {
    let dom = document.querySelector('.map1')
    var mapChart = echarts.init(dom)

    echarts.registerMap('china', chinaJSON)
    mapChart.setOption({
      series: [
        {
          name: '中国地图',
          type: 'map',
          roam: true,
          map: 'china', // 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
          label: {
            show: false,
            color: 'white'
          },
          geoIndex: 0,
          zoom: 1,
          emphasis: {
            label: {
              color: 'white'
            },
            itemStyle: {
              areaColor: '#1347d1'
            }
          },
          select: {
            label: {
              color: 'white'
            },
            itemStyle: {
              areaColor: '#1347d1'
            }
          },
          itemStyle: {
            areaColor: '#2190ee',
            shadowColor: '#1347d1'
          },
          data: [
            {name: '浙江省', value: 12001},
            {name: '崇左市', value: 12001},
            {name: '柳州市', value: 12001},
            {name: '来宾市', value: 12001},
            {name: '桂林市', value: 12001},
            {name: '梧州市', value: 12001},
            {name: '贺州市', value: 12001},
            {name: '玉林市', value: 12001},
            {name: '贵港市', value: 12001},
            {name: '百色市', value: 12001},
            {name: '钦州市', value: 12001},
            {name: '河池市', value: 12001},
            {name: '北海市', value: 12001},
            {name: '防城港市', value: 12001}
          ],
          tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(0,0,0,0.4)', // 提示框浮层的背景颜色。
            axisPointer: {
              // 坐标轴指示器配置项。
              type: 'shadow', // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
              axis: 'auto', // 指示器的坐标轴。
              snap: true // 坐标轴指示器是否自动吸附到点上
            },
            textStyle: {
              // 提示框浮层的文本样式。
              color: '#41feff',
              fontStyle: 'normal',
              fontWeight: 'normal',
              fontFamily: 'sans-serif',
              fontSize: 14
            },
            padding: 0, // 提示框浮层内边距，
            formatter: function (params) {
              let showname = params
              return `
                <div style='width:150px;height:150px'>
                    <p  style="width:100%;height:30px; background: linear-gradient(#2caaab, #136692);  text-align: center;line-height: 30px;">111</p>
                    <p  style="line-height: 30px; text-indent: 10px;">补助人数:111人</p>
                    <p style="line-height: 30px; text-indent: 10px;">补助金额:111万元</p>
                    <p style="line-height: 30px; text-indent: 10px;" >支出比例:111%</p>
                    <p style="line-height: 30px; text-indent: 10px;">补助发生率:111%</p>
              </div>
              `
            },
            position: ['70%', '20%']
          }
        }
      ]
    })
  })

  onMounted(() => {})
</script>

<style lang="less" scoped></style>
